<template>
  <view class="container">
    <form @submit="handleSubmit">
      <!-- 基本信息 -->
      <view class="form-section">
        <view class="section-title">基本信息</view>
        <view class="form-item">
          <text class="label">姓名</text>
          <input type="text" v-model="form.name" placeholder="请输入真实姓名" />
        </view>
        <view class="form-item">
          <text class="label">手机号</text>
          <input type="number" v-model="form.phone" placeholder="请输入手机号" />
        </view>
        <view class="form-item">
          <text class="label">邮箱</text>
          <input type="text" v-model="form.email" placeholder="请输入邮箱" />
        </view>
      </view>

      <!-- 执业信息 -->
      <view class="form-section">
        <view class="section-title">执业信息</view>
        <view class="form-item">
          <text class="label">执业证号</text>
          <input type="text" v-model="form.licenseNo" placeholder="请输入执业证号" />
        </view>
        <view class="form-item">
          <text class="label">执业年限</text>
          <input type="number" v-model="form.years" placeholder="请输入执业年限" />
        </view>
        <view class="form-item">
          <text class="label">专长领域</text>
          <view class="tags">
            <view 
              class="tag" 
              v-for="(item, index) in expertiseList" 
              :key="index"
              :class="{'active': form.expertise.includes(item)}"
              @tap="toggleExpertise(item)"
            >
              {{item}}
            </view>
          </view>
        </view>
      </view>

      <!-- 证件上传 -->
      <view class="form-section">
        <view class="section-title">证件上传</view>
        <view class="upload-list">
          <view class="upload-item">
            <text class="label">身份证正面</text>
            <view class="upload-box" @tap="chooseImage('idCardFront')">
              <image v-if="form.idCardFront" :src="form.idCardFront" mode="aspectFill"></image>
              <view v-else class="upload-placeholder">
                <uni-icons type="camera-filled" size="30" color="#999"></uni-icons>
                <text>点击上传</text>
              </view>
            </view>
          </view>
          <view class="upload-item">
            <text class="label">身份证反面</text>
            <view class="upload-box" @tap="chooseImage('idCardBack')">
              <image v-if="form.idCardBack" :src="form.idCardBack" mode="aspectFill"></image>
              <view v-else class="upload-placeholder">
                <uni-icons type="camera-filled" size="30" color="#999"></uni-icons>
                <text>点击上传</text>
              </view>
            </view>
          </view>
          <view class="upload-item">
            <text class="label">律师执业证</text>
            <view class="upload-box" @tap="chooseImage('license')">
              <image v-if="form.license" :src="form.license" mode="aspectFill"></image>
              <view v-else class="upload-placeholder">
                <uni-icons type="camera-filled" size="30" color="#999"></uni-icons>
                <text>点击上传</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 个人简介 -->
      <view class="form-section">
        <view class="section-title">个人简介</view>
        <textarea 
          v-model="form.introduction" 
          placeholder="请简要介绍您的执业经历和专业特长"
          maxlength="500"
        ></textarea>
        <text class="word-count">{{form.introduction.length}}/500</text>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" form-type="submit">提交申请</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        email: '',
        licenseNo: '',
        years: '',
        expertise: [],
        idCardFront: '',
        idCardBack: '',
        license: '',
        introduction: ''
      },
      expertiseList: [
        '婚姻家事',
        '劳动纠纷',
        '合同纠纷',
        '交通事故',
        '房产纠纷',
        '刑事辩护',
        '知识产权',
        '公司法律',
        '债权债务',
        '医疗纠纷'
      ]
    }
  },
  methods: {
    toggleExpertise(item) {
      const index = this.form.expertise.indexOf(item)
      if (index > -1) {
        this.form.expertise.splice(index, 1)
      } else {
        if (this.form.expertise.length < 3) {
          this.form.expertise.push(item)
        } else {
          uni.showToast({
            title: '最多选择3个专长领域',
            icon: 'none'
          })
        }
      }
    },
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.form[type] = res.tempFilePaths[0]
        }
      })
    },
    handleSubmit() {
      // 表单验证
      if (!this.form.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!this.form.licenseNo) {
        uni.showToast({
          title: '请输入执业证号',
          icon: 'none'
        })
        return
      }
      if (this.form.expertise.length === 0) {
        uni.showToast({
          title: '请选择专长领域',
          icon: 'none'
        })
        return
      }
      if (!this.form.idCardFront || !this.form.idCardBack || !this.form.license) {
        uni.showToast({
          title: '请上传证件照片',
          icon: 'none'
        })
        return
      }

      // TODO: 提交申请
      uni.showLoading({
        title: '提交中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '申请已提交',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.form-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    input {
      width: 100%;
      height: 88rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
    }
  }
  
  .tags {
    display: flex;
    flex-wrap: wrap;
    
    .tag {
      padding: 10rpx 30rpx;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: #666;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      
      &.active {
        color: #1890ff;
        background-color: rgba(24, 144, 255, 0.1);
      }
    }
  }
  
  textarea {
    width: 100%;
    height: 200rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
  }
  
  .word-count {
    font-size: 24rpx;
    color: #999;
    text-align: right;
    margin-top: 10rpx;
  }
}

.upload-list {
  .upload-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .upload-box {
      width: 100%;
      height: 300rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .upload-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        text {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }
  }
}

.submit-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #1890ff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style> 